<script lang="ts" setup>
import { appWindow,LogicalSize } from '@tauri-apps/api/window'
appWindow.setSize(new LogicalSize(60,60));
appWindow.setAlwaysOnTop(true);
appWindow.setResizable(false)
import {ref} from 'vue'

const show = ref<boolean>(false)
const openMenu = function(){
    if(!show.value){
        appWindow.setSize(new LogicalSize(200,200));
    }else{
        appWindow.setSize(new LogicalSize(60,60));
    }
    show.value = !show.value;
    
    
}

const key = function(e:any){
    console.log(e)
}

document.addEventListener('keypress',function(a:any){
    console.log(a)
})
import { hideRightMenu } from '../function';
hideRightMenu();
import { forbidSelect } from '../composables/common'
forbidSelect()
import rightMenu from '../components/rightMenu.vue';
// data-tauri-drag-region
</script>

<template>
<div class="startMenu" @keypress="key($event)" @click="openMenu" data-tauri-drag-region>
    <img class="startMenu-img" src="/note/startMenu.png" >
</div>
<right-menu v-if="show" br="50%"></right-menu>
</template>

<style scoped>
.startMenu{
    width: 100vw;
    height: 100vh;
    border-radius: 50%;
    background: rgba(34, 50, 47, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.startMenu-img{
    width: 30px;
    height: 30px; 
    pointer-events: none;
}
</style>